<html><head>
    <meta charset="utf-8">
    <meta name="layout" content="main" />
    <title>jQuery treetable</title>
	
	<link href="/${grails.util.Metadata.current.'app.name'}/css/treeTable/jquery.treetable.css" rel="stylesheet" type="text/css" />
	<link href="/${grails.util.Metadata.current.'app.name'}/css/treeTable/jquery.treetable.theme.default.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="/${grails.util.Metadata.current.'app.name'}/js/jquery/jquery-ui-1.8.18.custom.js"></script>
	<script type="text/javascript" src="/${grails.util.Metadata.current.'app.name'}/js/sortable/jquery-sortable.js"></script>
		
  </head>
  <body>
    <div id="main">
      <h1>jQuery treetable</h1>

	
<!-- ********************************** example-basic-expandable-3 ************************* -->
<table id="example-basic" >
	<tr class="blank ui-droppable" data-tt-id="blank00">
			<td>
				
			</td>
			
			<td></td>			
			<td></td>
	</tr>
		

	<tr class="branch ui-droppable" data-tt-id="00">
		<td>
			<span class="file ui-draggable">Archivo</span>

		</td>
		
	</tr>
	
	<tr class="blank ui-droppable" data-tt-id="blank01">
			<td>
			<span class="blank"></span>
			</td><td></td>
			
			<td>
	</tr>
	<tr class="branch ui-droppable" data-tt-id="01">
		<td>
			<span class="folder ui-draggable">CHUD 1</span>
			
			</td><td>Folder 1</td>
			
			<td>--
		</td>
	</tr>
	<tr class="blank ui-droppable" data-tt-id="blank02">
	<tr class="branch ui-droppable" data-tt-id="2" data-tt-parent-id="01">
		<td>
			<span class="folder ui-draggable">CHUD 2</span>
			
			</td><td>Folder 2</td>
			
			<td>--
		</td>
	</tr>
	<tr class="branch ui-droppable" data-tt-id="3" data-tt-parent-id="2">
		<td>
			<span class="folder ui-draggable">CHUD 3</span>
			
			</td><td>Folder 3</td>
			
			<td>--
		</td>
	</tr>

	<tr class="branch ui-droppable" data-tt-id="11">
		<td>
			<span class="folder ui-draggable">CHUD 4</span>
			
			</td><td>Folder 4</td>
			
			<td>--
		</td>
	</tr>
	<tr class="branch ui-droppable" data-tt-id="12" data-tt-parent-id="11">
		<td>
			<span class="folder ui-draggable">CHUD 5</span>
			
			</td><td>Folder 5</td>
			
			<td>--
		</td>
	</tr>

	<tr class="branch ui-droppable" data-tt-id="13" data-tt-parent-id="12">
		<td>
			<span class="folder ui-draggable">CHUD 6</span>
			
			</td><td>Folder 6</td>
			
			<td>--
		</td>
	</tr>

</table>


   </div>  


    <script src="/${grails.util.Metadata.current.'app.name'}/js/ui/jquery.ui.core.js"></script>
    <script src="/${grails.util.Metadata.current.'app.name'}/js/ui/jquery.ui.widget.js"></script>
    <script src="/${grails.util.Metadata.current.'app.name'}/js/ui/jquery.ui.mouse.js"></script>
    <script src="/${grails.util.Metadata.current.'app.name'}/js/ui/jquery.ui.draggable.js"></script>
    <script src="/${grails.util.Metadata.current.'app.name'}/js/ui/jquery.ui.droppable.js"></script>
    <script src="/${grails.util.Metadata.current.'app.name'}/js/treeTable/jquery.treetable.js"></script>
    <script>
      $("#example-basic").treetable({ expandable: true });

		// Sortable rows
		$('.sorted_table').sortable({
		  containerSelector: 'table',
		  itemPath: '> tbody',
		  itemSelector: 'tr',
		  placeholder: '<tr class="placeholder"/>'
		})
	  
	  // Para poder hacer Drag&Drop con los elementos de example-basic-expandable-3
	  // Highlight selected row
     // $("#example-basic tbody").on("mousedown", "tr", function() {
     //   $(".selected").not(this).removeClass("selected");
     //   $(this).toggleClass("selected");
     // });

      // Drag & Drop Example Code -> #example-basic-expandable-3 .folder :: está indicando que se puede mover un folder
      $("#example-basic .file, #example-basic .folder").draggable({
        helper: "clone",
        opacity: .75,
        refreshPositions: true, // Performance?
        revert: "invalid",
        revertDuration: 300,
        scroll: true
      });

	  //Aquí es donde hace que un folder acepte elementos (se añade que un fichero pueda aceptar tener hijos colgando de él)
      $("#example-basic .file, #example-basic .folder, #example-basic .blank").each(function() {
        $(this).parents("#example-basic tr").droppable({
          accept: ".file, .folder",
          drop: function(e, ui) {
            var droppedEl = ui.draggable.parents("tr");
            $("#example-basic").treetable("move", droppedEl.data("ttId"), $(this).data("ttId"));
			//alert($(this).data("ttId"));
          },
          hoverClass: "accept",
		  //Esta parte hace que cuando queramos hacer drag&drop de un fichero/carpeta se expanada el interior aunque esté cerrado.
          //over: function(e, ui) {
          //  var droppedEl = ui.draggable.parents("tr");
          //  if(this != droppedEl[0] && !$(this).is(".expanded")) {
          //    $("#example-basic-expandable-3").treetable("expandNode", $(this).data("ttId"));
          //  }
          //}
        });
      });

      $("form#reveal").submit(function() {
        var nodeId = $("#revealNodeId").val()

        try {
          $("#example-basic").treetable("reveal", nodeId);
        }
        catch(error) {
          alert(error.message);
        }

        return false;
      });
    </script>
  

</body></html>